{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}

    <div class="col-xs-12 col-sm-6 widget-container-col ui-sortable">
        <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-header">
                <h5 class="widget-title">{{ 'The matters needing attention'|trans }}</h5>
                <!-- #section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
                <!-- /section:custom/widget-box.toolbar -->
            </div>

            <div class="widget-body">
                <div class="widget-main">
                   <div class="row">
                       <ul>
                           <li>1: {{ 'The user number can not be empty'|trans }}</li>
                           <li>2: {{ 'The password is empty or less than 6, the default 123456'|trans }}</li>
                           <li>3: {{ 'The system automatically filtering agents work number is empty and the repeated data'|trans }}</li>
                       </ul>
                   </div>
                </div>
            </div>
        </div>

        <div class="widget-box">
            <div class="widget-header">
                <h5 class="widget-title">{{ 'Direct add'|trans }}</h5>
                <!-- #section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                </div>
                <!-- /section:custom/widget-box.toolbar -->
            </div>

            <div class="widget-body">
                <div class="widget-main" id="action_lsit">
                    <form class="form-horizontal" id="direct-form" method="post">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> {{ 'Agent number'|trans }} </label>
                            <div class="col-sm-9">
                                <input type="text" id="agent_start" name="agent_start" placeholder="{{ 'Start'|trans }}" data-rel="tooltip" title="{{ 'Began to seat work number(Must be numeric)'|trans }}" data-placement="bottom" class="col-xs-5 col-sm-2" />
                                <span class="col-xs-1 col-sm-1 ">~</span>
                                <input type="text" id="agent_end" name="agent_end" placeholder="{{ 'End'|trans }}" class="col-xs-5 col-sm-2"
                                       data-rel="tooltip" title="{{ 'Agents work number end(Must be numeric)'|trans }}" data-placement="bottom" />
                                <div id="error" class="col-xs-10 col-sm-7"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> {{ 'Agent Nickname'|trans }} </label>
                            <div class="col-sm-9">
                                <input type="text" id="agent_nickname" name="agent_nickname" data-rel="tooltip" title="{{ 'The Nickname Of The Agent'|trans }}" data-placement="bottom" class="col-xs-5 col-sm-5" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> {{ 'Agents password'|trans }} </label>
                            <div class="col-sm-9">
                                <input type="password" id="agent_password" name="agent_password" data-rel="tooltip" title="{{ 'The password is not less than 6 seats(Defult:123456)'|trans }}" data-placement="bottom" class="col-xs-5 col-sm-5" value="123456" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> {{ 'User role'|trans }} </label>
                            <div class="col-sm-9">
                                <select class="col-xs-5 col-sm-5" name="agent_role">
                                    {% for key,role in roles %}
                                        <option value="{{ key }}">{{ role }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> {{ 'Belongs to the skill set'|trans }} </label>
                            <div class="col-sm-9">
                                <select class="col-xs-5 col-sm-5" name="agent_que">
                                    {% for key,que in ques %}
                                        <option value="{{ key }}">{{ que }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-9 col-md-offset-3">
                                <button class="btn btn-info" type="submit">
                                    <i class="ace-icon fa fa-check bigger-110"></i>
                                    {{ 'Batch add'|trans }}
                                </button>
                                &nbsp; &nbsp; &nbsp;
                                <button class="btn" type="reset">
                                    <i class="ace-icon fa fa-undo bigger-110"></i>
                                    {{ 'Reset'|trans }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 widget-container-col ui-sortable">
        <div class="widget-box">
            <div class="widget-header">
                <h5 class="widget-title">{{ 'Introduction to add'|trans }}</h5>
                <!-- #section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                </div>
                <!-- /section:custom/widget-box.toolbar -->
            </div>

            <div class="widget-body">
                <div class="widget-main" id="action_lsit">
                    <div class="widget-box">
                        <div class="widget-header widget-header-flat">
                            <h4 class="widget-title">1. {{ 'Download data template'|trans }}</h4>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main">
                                <button class="btn btn-primary" onclick="export_model()">
                                    <i class="ace-icon fa fa-flask align-top bigger-125"></i>
                                    {{ 'Download template'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <form action="{{ path('icsoc_agent_upload_export') }}" method="post"  enctype="multipart/form-data" id="theForm">
                    <div class="widget-main" id="action_lsit">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title">2. {{ 'Select Edit good template file to import data'|trans }}</h4>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="col-xs-8">
                                        <input type="file" id="file_address" name="file_address" />
                                    </div>
                                    <div style="clear: both"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-main" id="action_lsit">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title">3. {{ 'To determine the import'|trans }}</h4>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <button class="btn btn-primary" type="button" onclick="start_upload_data()">
                                        <i class="ace-icon fa fa-cloud-upload bigger-125"></i>
                                        {{ 'Start import'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@gritter_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $('[data-rel=tooltip]').tooltip({container:'body'});
        var Validator = $('#direct-form').validate({
            {{ jqvalidator() }}
            errorPlacement: function(error, element){
                if (element[0].id == 'agent_start' || element[0].id == 'agent_end' ) {
                    $("#error").html('');
                    error.appendTo($("#error"));
                } else {
                    error.appendTo(element.parent());
                }
                $(element.parent().parent()).attr('class','form-group has-error');
            },
            success: function(lable) {
                var id = $(lable).attr("for");
                if (id == 'agent_start' || id == 'agent_end') {
                    $(lable.parent().parent().parent()).attr('class', 'form-group');
                } else {
                    $(lable.parent().parent()).attr('class', 'form-group');
                }
            },
            rules: {
                'agent_start': {required:true,digits:true },
                'agent_end': {required:true,digits:true,compare:'#agent_start' },
                'agent_password': {required:true,minlength:6}
            },
            messages: {
                'agent_start': {required:'',digits:'{{ 'Must be an integer'|trans }}'},
                'agent_end': {required:'',digits:'{{ 'Must be an integer'|trans }}',compare:"{{ 'The end than the beginning of small'|trans }}"},
                'agent_password': {required:'{{ 'Password can not be empty'|trans }}',minlength:'{{ 'The password is not less than six'|trans }}'}
            }
        });
        var message = '';
        $.validator.addMethod("compare", function(value, element, param) {
            var pvalue = $(param).val();
            var num = parseInt(value) - parseInt(pvalue);
            if (num <= 0) {
                message = "{{ 'The end than the beginning of small'|trans }}";
                return false;
            } else {

                var flag = false;
                //验证是否超标；
                 $.ajax({
                    type: 'post',
                    async: false,
                    url: '{{ path('icsoc_agent_allow_num') }}',
                    data: {'num':num},
                    success: function (response) {
                        if (response.error) {
                            message = '{{ 'The number of seats exceed the standard, but also add'|trans }}:'+response.num;
                            gritterAlert('{{ 'Prompt'|trans }}', '{{ 'The number of seats exceed the standard, but also add'|trans }}:'+response.num, 'error');
                            flag = false;
                        } else {
                            flag = true;
                        }
                    }
                });
                console.log(flag);
                return flag;
            }
            return true;
        }, $.validator.format(message));

        //导出模板
        function export_model()
        {
            window.location.href="{{ path('icsoc_agent_export') }}";
        }
        /* 开始导出数据 */
        function start_upload_data()
        {
            if(!$("#file_address").val()) {
                gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Please select import data file'|trans }}','error');
                return false;
            } else {
                $("#theForm").submit();
            }
        }
        $(document).ready(function(){
            $('#file_address').ace_file_input({
                no_file:'{{ 'No File'|trans }} ...',
                btn_choose:'{{ 'Choose'|trans }}',
                btn_change:'{{ 'Re selection'|trans }}',
                onchange:null,
                thumbnail:false
            });
        });
    </script>
{% endblock %}